<template>
  <div style="height:100%">
    <div class="EDResour homePageCard">
      <div class="cardTitle flexBetween padding5-10 fontSize18 fontWeight">
        <div class="titleName">应急资源-装备</div>
        <SelectOptions :value="sign1" :options="option" @change="select1" />
        <!-- <div class="select">
          <select name="chooseDate" @change="select1($event.target.value)">
            <option value="">全部</option>
            <option :value="item.value" v-for="(item,index) in option" :key="index">{{item.label}}</option>
          </select>
        </div> -->
      </div>
      <div style="height:76%">
        <ConeChart containerId="yjzyzb" :conedata="EquipmentData" v-if="isShowZYZB" @svgClick="svgClick1"></ConeChart>
      </div>
      <!-- <div class="backgroundColor textSJ flexBetween">
        <div class="lefttx">
          <div class="parent flexAround">
            <div>
              <img src="../../../assets/img/sjx.png" alt="" width="80px" height="105px" style="margin-top: 14px;">
            </div>
            <div class="pxsbx">
              <div class="pxsbxDiv one bgcolor008DFF">
                <div class="white textCenter">已调配 :{{ EquipmentData.onDeploy || 0 }}</div>
              </div>
              <div class="pxsbxDiv two bgcolorF59066">
                <div class="white textCenter">已到达 :{{ EquipmentData.onArrival || 0 }}</div>
              </div>
              <div class="pxsbxDiv three bgcolorFDDD67">
                <div class="white textCenter">在途中 :{{ EquipmentData.onTheWay || 0 }}</div>
              </div>
            </div>

          </div>
        </div>
      </div> -->
    </div>
    <div class="EDResour homePageCard" style="margin-top:3%">
      <div class="cardTitle flexBetween padding5-10 fontSize18 fontWeight">
        <div class="titleName">应急资源-物资</div>
        <SelectOptions :value="sign2" :options="option" @change="select2" />
        <!-- <div class="select">
          <select name="chooseDate" @change="select2($event.target.value)">
            <option value="">全部</option>
            <option :value="item.value" v-for="(item,index) in option" :key="index">{{item.label}}</option>
          </select>
        </div> -->
      </div>
      <div style="height:76%">
        <ConeChart containerId="yjzywz" :conedata="MaterialsData" v-if="isShowZYWZ" @svgClick="svgClick2"></ConeChart>
      </div>
      <!-- <div class="backgroundColor textSJ flexBetween">
        <div class="lefttx">
          <div class="parent flexAround">
            <div>
              <img src="../../../assets/img/sjx.png" alt="" width="80px" height="105px" style="margin-top: 14px;">
            </div>
            <div class="pxsbx">
              <div class="pxsbxDiv one bgcolor008DFF">
                <div class="white textCenter">已调配 :{{ MaterialsData.onDeploy || 0 }}</div>
              </div>
              <div class="pxsbxDiv two bgcolorF59066">
                <div class="white textCenter">已到达 :{{ MaterialsData.onArrival || 0 }}</div>
              </div>
              <div class="pxsbxDiv three bgcolorFDDD67">
                <div class="white textCenter">在途中 :{{ MaterialsData.onTheWay || 0 }}</div>
              </div>
            </div>

          </div>
        </div>
      </div> -->
    </div>

    <el-dialog title="资源台账-装备" :visible.sync="dialogZyclVisible1" width="70%">
      <el-table :data="tableData333" :header-cell-style="{
        background: '#B1C8F9',
        color: '#000',
      }" style="width: 100%" border height="600">
        <el-table-column type="index" width="50" align="center" label="序号" fixed></el-table-column>
        <el-table-column :prop="item.prop" align="center" :label="item.label" :width="item.width || '200'"
          v-for="(item, i) of zbColums" :key="i" show-overflow-tooltip :fixed="item.fixed">
        </el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog title="资源台账-物资" :visible.sync="dialogZyclVisible2" width="70%">
      <el-table :data="tableData444" :header-cell-style="{
        background: '#B1C8F9',
        color: '#000',
      }" style="width: 100%" border height="600">
        <el-table-column type="index" width="50" align="center" label="序号" fixed></el-table-column>
        <el-table-column :prop="item.prop" align="center" :label="item.label" :width="item.width || '200'"
          v-for="(item, i) of wzColums" :key="i" show-overflow-tooltip :fixed="item.fixed">
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { getResourceEquipmentData, getResourceMaterialsData } from "@/api/EmergencyResources/EmergencyResources.js";
import { equipListPage, suppliesListPage } from "@/api/EmergencyResources/EmergencyResources.js";
import { getResourceLevelUnit } from "@/api/common.js";
import ConeChart from "./ConeChart.vue";
import { zbColums, wzColums } from "@/views/SystemHomepage/HomePageContent/columns";
// import { getResourceDetails } from "@/api/EmergencyResources/EmergencyResources.js";
import SelectOptions from "@/components/selectOptions.vue";
export default {
  name: "EDResourcesEquipment",
  components: {
    ConeChart,
    SelectOptions
  },
  data() {
    return {
      EquipmentData: {}, // 装备
      MaterialsData: {}, // 物资
      personOrgId: JSON.parse(sessionStorage.getItem("org")).orgId,
      unitId: JSON.parse(sessionStorage.getItem("org")).orgId,
      option: [],
      isShowZYZB: false,
      isShowZYWZ: false,
      zbColums: zbColums,
      wzColums: wzColums,
      tableData333: [],
      tableData444: [],
      dialogZyclVisible1: false,
      dialogZyclVisible2: false,
      id1: "",
      id2: "",
      sign1: "",
      sign2: ""
    };
  },
  beforeDestroy() {
    this.$eventBus.$off("changeTeamYjzb");
  },
  mounted() {
    this.getEquipmentData();
    this.getMaterialsData();
    this.getLevelUnit();
  },
  methods: {
    select1(val) {
      this.id1 = val;
      this.unitId = val;
      this.getEquipmentData(val);
    },
    select2(val) {
      this.id2 = val;
      this.unitId = val;
      this.getMaterialsData(val);
    },
    // async svgClick1(val) {
    //   console.log(val);
    //   const orgId = this.id1 || JSON.parse(sessionStorage.getItem("org")).orgId;
    //   const params = {
    //     orgId,
    //     state: val.value + "",
    //     categoryName: "2",
    //     pageNum: 1,
    //     pageSize: 100
    //   };
    //   const res = await getResourceDetails(params);
    //   if (res) {
    //     this.tableData333 = res.equipList.data;
    //     this.dialogZyclVisible1 = true;
    //   }
    // },
    // async svgClick2(val) {
    //   console.log(val);
    //   const orgId = this.id2 || JSON.parse(sessionStorage.getItem("org")).orgId;
    //   const params = {
    //     orgId,
    //     state: val.value + "",
    //     categoryName: "4",
    //     pageNum: 1,
    //     pageSize: 100
    //   };
    //   const res = await getResourceDetails(params);
    //   if (res) {
    //     this.tableData444 = res.suppliesList.data;
    //     this.dialogZyclVisible2 = true;
    //   }
    // },
    svgClick1(data) {
      if (data === undefined || data === null) {
        console.log(data);
      } else {
        let val = 0;
        if (data.label === "已到达") {
          val = 3;
        } else if (data.label === "已调配") {
          val = 1;
        } else if (data.label === "在途中") {
          val = 2;
        }
        this.zbClick(val);
      }

    },
    svgClick2(data) {
      if (data === undefined || data === null) {
        console.log(data);
      } else {
        let val = 0;
        if (data.label === "已到达") {
          val = 3;
        } else if (data.label === "已调配") {
          val = 1;
        } else if (data.label === "在途中") {
          val = 2;
        }
        this.wzClick(val);
      }
    },
    getSuppliesListPage(params) {
      suppliesListPage(params).then(res => {
        res.data.forEach(el => {
          if (el.occupation === 0) {
            el.ztmc = "待命";
          } else if (el.occupation === 1) {
            el.ztmc = "已调配";
          }
        });
        this.tableData444 = res.data;
        this.dialogZyclVisible2 = true;
      });
      // this.dialogZyclVisible2 = true;
    },
    getEquipListPage(params) {
      equipListPage(params).then(res => {
        res.data.forEach(el => {
          if (el.occupation === 0) {
            el.ztmc = "待命";
          } else if (el.occupation === 1) {
            el.ztmc = "已调配";
          }
        });
        this.tableData333 = res.data;
        this.dialogZyclVisible1 = true;
      });
    },
    getLevelUnit() {
      getResourceLevelUnit({ orgId: this.personOrgId }).then(res => {
        const option = res.map((i) => {
          return {
            label: i.orgOtherName,
            value: i.id
          };
        });
        option.unshift({ value: "", label: "全部" });
        this.option = option;
      });
    },
    getEquipmentData(id) {
      const keyObjs = {
        onArrival: "已到达",
        onDeploy: "已调配",
        onTheWay: "在途中"
      };
      const arr = [];
      getResourceEquipmentData({ orgId: id || this.personOrgId }).then(res => {
        for (const key in res) {
          if (key.startsWith("on")) {
            arr.push({
              label: keyObjs[key],
              value: res[key] || 0
            });
          }
        }
        arr.sort((a, b) => a.value - b.value);
        this.EquipmentData = arr;
        this.isShowZYZB = true;
      });
    },
    getMaterialsData(id) {
      const keyObjs = {
        onArrival: "已到达",
        onDeploy: "已调配",
        onTheWay: "在途中"
      };
      const arr = [];
      getResourceMaterialsData({ orgId: id || this.personOrgId }).then(res => {
        for (const key in res) {
          if (key.startsWith("on")) {
            arr.push({
              label: keyObjs[key],
              value: res[key] || 0
            });
          }
        }
        arr.sort((a, b) => a.value - b.value);
        this.MaterialsData = arr;
        this.isShowZYWZ = true;
      });
    },
    zbClick(i) {
      const params = {
        pageNum: 1,
        pageSize: 500
      };
      if (i === 1) {
        // params.unitId = JSON.parse(sessionStorage.getItem("org")).orgId;
        params.type = "sy";
        params.unitId = this.unitId;
        this.getEquipListPage(params);
      } else {
        params.occupation = i;
        params.unitId = this.unitId;
        this.getEquipListPage(params);
      }


    },
    wzClick(i) {
      const params = {
        pageNum: 1,
        pageSize: 500
      };
      if (i === 1) {
        // params.unitId = JSON.parse(sessionStorage.getItem("org")).orgId;
        params.type = "sy";
        params.unitId = this.unitId;
        this.getSuppliesListPage(params);
      } else {
        params.occupation = i;
        params.unitId = this.unitId;
        this.getSuppliesListPage(params);
      }
      // params.occupation = i;
      // params.unitId = JSON.parse(sessionStorage.getItem("org")).orgId;
      // this.getSuppliesListPage(params);
    }
  }
};
</script>

<style scoped lang="less">
.homePageCard {
  height: 48.5%;
}

:deep(.el-dialog__header) {
  background: #5077ff;

  .el-dialog__title {
    color: #fff;
  }

  .el-dialog__headerbtn {
    top: 5px;
    font-size: 30px !important;
  }

  .el-icon-close {
    color: #fff;
  }

  padding: 10px;
}

:deep(.el-dialog__body) {
  padding: 10px;
}

:deep(.el-table__fixed) {
  height: 580px !important;
}
</style>
